Fix/misc browser UI fixes#20883
Conversation
caybro
requested review from
a team,
alexjba,
micieslak and
noeliaSD
as code owners
caybro
requested review from
Khushboo-dev-cpp,
Copilot,
friofry and
sunleos
and removed request for
Khushboo-dev-cpp
There was a problem hiding this comment.
Pull request overview
This PR collects several Browser UI fixes plus minor StatusQ component tweaks. It updates sizing/spacing across the Mobile Browser per latest Figma (zooming address bar, find bar, bottom nav, tab/bookmark cards, settings menu icons), swaps the empty-tab illustration, fixes the favicon clipping in the address bar, ensures opening tabs/bookmarks no longer activates the address bar, propagates DevTools toggle state through a new devToolsToggled signal so the DevTools window's own close button works, and refactors StatusDialogHeader to use top-only corner radii.
Changes:
- Mobile Browser UI scaling/sizing updates (toolbars, address/find bars, tab & bookmark cards, settings menu, header buttons).
- Browser behavior fixes: opening tab/bookmark stays in view mode (
addNewTabno longer auto-activates address bar; newaddNewEmptyTabhelper); DevTools close button properly disables DevTools via newdevToolsToggledsignal;StandardKey.Closenow removes the current view via a newremoveViewRequestedsignal. - StatusQ tweaks:
StatusDialogHeaderuses per-corner radii;StatusBaseButtonusespointerHoverHandler.hovered(instead ofroot.hovered) for text color and tooltip visibility, and the round-icon size now followsroot.icon.width/height;StatusTextFieldnon-hovered background usesprimaryColor3.
Reviewed changes
Copilot reviewed 21 out of 27 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml | Use per-corner radii instead of bottom-corner cover rectangle. |
| ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml | Use primaryColor3 as default (non-hovered) background. |
| ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml | Switch to pointerHoverHandler.hovered; round icon uses icon.width/height. |
| ui/StatusQ/src/assets/png/png.qrc | Replace pepehand.png with new_tab.png. |
| ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml | Add configurable iconSize. |
| ui/app/AppLayouts/Browser/webview/BrowserWebViewContext.qml | Wire onDevToolsToggled to persist setting. |
| ui/app/AppLayouts/Browser/views/EmptyWebPage.qml | Use new tab illustration with new dimensions. |
| ui/app/AppLayouts/Browser/views/BrowserShortcutActions.qml | Add removeViewRequested signal for StandardKey.Close. |
| ui/app/AppLayouts/Browser/popups/TabsBookmarksOverviewModal.qml | Replace inline search field with SearchBox; resize cards/icons/font. |
| ui/app/AppLayouts/Browser/popups/MobileSettingsMenu.qml | Extract SettingsListItem component with consistent asset size. |
| ui/app/AppLayouts/Browser/popups/BrowserSettingsMenu.qml | Take browserSettings as required prop instead of using global. |
| ui/app/AppLayouts/Browser/panels/MobileAddressBar.qml | Bump close button icon size; mark as round; tighten layout spacing. |
| ui/app/AppLayouts/Browser/panels/FindBar.qml | Extract FindBarButton component; bump icon sizes. |
| ui/app/AppLayouts/Browser/panels/BrowserPortraitToolbar.qml | Bump open-tabs counter font size. |
| ui/app/AppLayouts/Browser/panels/BrowserLandscapeToolbar.qml | Resize DappsComboBox; bump open-tabs counter font size. |
| ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml | Resize button/icon and use icon.color instead of asset.color. |
| ui/app/AppLayouts/Browser/controls/BrowserAddressField.qml | Use Theme.radius; enlarge favicon to 60% of height. |
| ui/app/AppLayouts/Browser/BrowserLayout.qml | Add addNewEmptyTab, optional activate flag for new tabs; wire onRemoveViewRequested; pass browserSettings to settings menu. |
| ui/app/AppLayouts/Browser/adapters/WebViewAdapter.qml | Emit devToolsToggled(false) instead of mutating devToolsEnabled. |
| ui/app/AppLayouts/Browser/adapters/LazyWebViewAdapter.qml | Forward onDevToolsToggled from inner view. |
| ui/app/AppLayouts/Browser/adapters/AbstractWebView.qml | Declare devToolsToggled(bool enabled) signal. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Jenkins BuildsClick to see older builds (81)
|
|
Tested APK build # 1 Summary: Fixes #20443 - partially fixed. Logged bugs from 10-16 on the ticket |
caybro
force-pushed
the
fix/misc-browser-ui-fixes
branch
from
d6cc151 to
50a4cd5
Compare
caybro
force-pushed
the
fix/misc-browser-ui-fixes
branch
from
50a4cd5 to
0445b78
Compare
caybro
force-pushed
the
fix/misc-browser-ui-fixes
branch
3 times, most recently
from
cde4cf4 to
4389f3f
Compare
sunleos
left a comment
sunleos
left a comment
There was a problem hiding this comment.
tested the changes on Android 15
all looks good to me.
anything remaining will be handled in the other created tickets.
caybro
force-pushed
the
fix/misc-browser-ui-fixes
branch
from
4389f3f to
83c1a9d
Compare
- also size-optimize some browser PNGs using `optipng` Fixes #20601
- we don't have an active WebView, so the abstract action wouldn't do anything
…field - make a distinction between opening a new tab for viewing, and an empty one (where we actually do want to start entering the URL) Fixes #20656
- don't break the settings binding, and update the internal action properly
- don't take the value from `d.iconSize` which is precomputed, make it possible to set it properly via `icon.width/height`
…ltips and text color - that way we don't get spurious hover events on touch
- in Qt 6.11, we can set the radius on an individual rectangle corner, no need to create an extra fake Rectangle
- no need to set the border here at all Fixes #20683
- increase font sizes and spacings - use default corner radius - element sizes upped to 44, icon sizes to 28 - use the standard SearchBox component - increase the webpage preview size Fixes #20443
- adjust the flags to make it more privacy oriented
- also add a dark variant Fixes #20601
- we `freeze` the native WebView when there's an active popup/modal Fixes #20967
caybro
force-pushed
the
fix/misc-browser-ui-fixes
branch
from
83c1a9d to
ddc0a6f
Compare
There was a problem hiding this comment.
I spotted some strange behavior regarding changed virtual keyboard behavior. Observed on both Android 15 and 16, not present on earlier builds.
After opening the keyboard, some strange scrolling behavior appears - there is blank area below the initial cut-off edge. It's especially problematic when after triggering vkbd, the input is covered by keyboard and it's necessary to scroll. Then after scrolling the input is still invisible bc it's under that blank area:
Screen_Recording_20260521_135905_Status.Debug.mp4
Other issue is the fact that tab bar and tool bar on the bottom are visible after triggering vkbd and consume precious space on the screen. Those are probably not necessary then.
Ah ok, other sections are ok? If it's just about the Browser section, then this needs to be probably addressed in the native WebView component, CC @friofry |
Yeah, it looks like WebView's internal problem. Other sections are fine. |
What does the PR do
Best review commit by commit, in a nutshell:
minor Browser UI fixes according to latest Figma and We need to zoom in all the browser UI elements across the board #20443
separate fixes for new tab image ([Browser] Update the new tab image #20601), favicon ([Browser] Transparent favicon bleeds outside circle container #20683) and URL entry field ([Browser] clicking on an open or bookmarked tab opens it the browser edit mode while it should be opened in the browser view mode #20656)
fix closing the DevTools using its own close button
small fixes to StatusBaseButton and StatusDialogHeader
Fixes #20443
Fixes #20601
Fixes #20683
Fixes #20656
Fixes #20967
Affected areas
Browser
Quality checklist
My PR is consistent with this document: QML Architecture Guidelines
Screencapture of the functionality
Impact on end user
Better Mobile Browser UX
How to test
Risk